<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>具体样式</title>
    <style>

        /*    文本样式：
             字体/颜色/粗细/缩进/字体风格/字体装饰/字体对齐/尺寸
font-family/color/font-weight/text-indent/font-style/text-decoration/text-align/font-size
        */
        .one {
            /*设置字体*/
            font-style: italic; /*斜体1*/
            font-size: 2em;
            font-weight: bolder;
            color: yellowgreen;
            text-decoration: none; /*删除线*/
            height: 300px;
            width: 300px;
            border: 1px solid red;
        }

        .two {
            color: red;
            font: italic bold 20px "楷体";
            text-indent: 2em;
            text-align: left;

        }

        .three {
            /*背景相关样式*/
            height: 500px;
            /*width: 500px;*/
            border: 1px solid red;
            background-color: gray;
            /*背景图像  从左上角开始往右下角依次裁剪*/
            /*图片压缩*/
            background-image: url(../../../imgs/1.jpg);
            /*background-size 设置图片的尺寸 水平方向 垂直方向*/
            background-size: 50px 50px; /*100% 100%*/
            /*去掉重复复制*/
            background-repeat: no-repeat;
            /*background-position: center center;*/
            /*background-position: center center;*/
            background-position-x: center;
            background-position-y: center;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
<div class="one">这是一个div标签</div>
<p class="two">这是一个p标签,这是一个p标签这是一个p标签这是一个p标签这是一个p标签这是一个p标签</p>
<div class="three">这是第二个div标签</div>
</body>
</html>